<template>
	<div id="hello">
		<div class="math-left">
			<p>
				<span style="font-weight: bold">数学符号</span>
				<el-segmented v-model="curValue" @change="handleSegmentChange" :options="items.map(item => item.text)" />
			</p>
			<div class="math-area math-area_left">
				<textarea @input="handleTextareaInput" class="edit-area" v-model="localLatex" placeholder="输入LaTeX公式..."></textarea>
			</div>
		</div>
		<div class="math-right">
			<p>
				<span style="font-weight: bold">实时预览</span>
			</p>
			<div class="math-area math-area_right">
				<math-jax :latex="realLatex" :block="true" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { watch, ref } from 'vue';

// 定义 emits：向父组件传递选中的分类，以及更新后的公式
const emit = defineEmits(['selected', 'update:modelValue', 'appendFormula']);

// 接收父组件的 props
const props = defineProps({
	modelValue: {  // 父组件的 fomule 值（双向绑定）
		type: String,
		default: ''
	},
	items: {  // 分类列表（常用、运算等）
		type: Array,
		default: () => []
	},
});

// 本地状态
const curValue = ref(undefined);  // 当前选中的分类（默认第一个）
const localLatex = ref(props.modelValue);  // 本地编辑的 LaTeX 内容
const realLatex = ref(`\\begin{array}{l} ${props.modelValue} \\end{array}`);  // 预览用的 LaTeX
const handleTextareaInput = (event: Event) => {
	const target = event.target as HTMLTextAreaElement;
	localLatex.value = target.value;
	debugger
};


// 监听本地编辑内容变化，同步到预览和父组件
watch(localLatex, (newVal) => {
	realLatex.value = `\\begin{array}{l} ${newVal} \\end{array}`;
	emit('update:modelValue', newVal);  // 双向绑定更新父组件
});

// 切换分类时，通知父组件显示对应组件（如常用、运算）
const handleSegmentChange = (value) => {
	curValue.value = value;
	emit('selected', value);  // 传递选中的分类文本（如“常用”）
};

// 接收来自分类组件的符号，执行追加操作
const appendSymbol = (symbol: string) => {
	// 核心：在现有内容后追加符号
	localLatex.value += symbol;
	// 同步到预览和父组件
	realLatex.value = `\\begin{array}{l} ${localLatex.value} \\end{array}`;
	emit('update:modelValue', localLatex.value);
};

// 暴露方法给父组件，让分类组件可以调用
defineExpose({
	appendSymbol
});
</script>

<style scoped lang="scss">
.edit-area {
	white-space: pre; /* 确保保留所有空白字符和换行 */
}
/* 样式保持不变 */
#hello {
	height: 200px;
	position: relative;
	.math-left{
		width: 50%;
		float: left
	}
	.math-right{
		width: 50%;
		float: left;
		padding-left: 16px;
	}
	.math-area {
		width: 50%;
		float: left;
		height: 162px;

		p {
			margin: 10px 0;
		}

		.edit-area {
			height: 160px;
			width: 100%;
			float: left;
			border: 1px solid rgb(206, 212, 218);
			background-color: rgba(0, 0, 0, 0);
			caret-color: rgb(0, 0, 0);
		}
	}
	.math-area_left{
		width: 100%;
		background: white;
	}
	.math-area_right{
		width: 100%;
		word-break: break-all;
		display: block;
		overflow-x: auto;
		border: 1px solid rgb(206, 212, 218);
		white-space: normal;
		margin-top: 31px;
		height: 160px;
		.mjx-container[jax="SVG"] > svg{
			font-size: 18px;
		}
	}
}
</style>
